<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
   <div id="one">
    <div class="title" >
        <span class="active"><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入手机号：</label>
            <input type="text" id="phone">
        </div>
        <button id="next1">下一步</button>
    </div>
</div>
    <!------
    ----------------------------------------------->
    <br>
   
    <div id="two">
        <hr>
        <div class="title" >
            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="xxxx" disabled id="username">
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="xxxx" disabled id="phone2">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="xxxxxxx" disabled id="wenti">
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="daan">
            </div>
            <button id="uponebu">上一步</button>
            <button id="next2">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <br>
   
   <div id="three">
    <hr>
    <div class="title" >
        <span><i>1</i>输入找回账号</span>
        <span><i>2</i>回答密保问题</span>
        <span class="active"><i>3</i>重置密码</span>
    </div>
    <div class="box">
        <div class="input-item">
            <label>请输入新密码：</label>
            <input type="text" id="newpassword">
        </div>
        <button id="uponebu2">上一步</button>
        <button id="reset">立即重置</button>
    </div>
   </div>
<script src="../axios.js"></script>
<script>
    function qs(ele) {
    return document.querySelector(ele)
}
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

qs('#two').style.display = 'none'
qs('#three').style.display = 'none'
//===========输入找回密码===========
qs('#next1').addEventListener('click',async function(){
    const res = await axios.get('/user/findPwd',{
        params:{
            phone :qs('#phone').value
        }
    })
    console.log(res);
    if(res.status !==200){
        return alert('手机号失败')
    }
    qs('#one').style.display = 'none'
    qs('#two').style.display = 'block'
qs('#three').style.display = 'none'
qs('#username').value = res.data.data.username
qs('#phone2').value =res.data.data.phone
qs('#wenti').value =res.data.data.question
})
//=============回答密保问题============
qs('#next2').addEventListener('click',async function(){
    const res = await axios.get('/user/findPwd',{
        params:{
            phone :qs('#phone').value
        }
    })
    let usename = res.data.data.username
    id = res.data.data.id
    console.log(id);
    console.log(usename);
    if(qs('#daan').value === usename){
        qs('#one').style.display = 'none'
    qs('#two').style.display = 'none'
qs('#three').style.display = 'block'
    }
})
//==========上一步=========
qs('#uponebu').addEventListener('click',function(){
    qs('#one').style.display = 'block'
    qs('#two').style.display = 'none'
qs('#three').style.display = 'none'
})
//==============重置密码============
qs('#reset').addEventListener('click',async function(){
    const res = await axios.post('/user/resetPwd',{
      
            id: JSON.stringify(id),
            password:qs('#newpassword').value,
            answer:qs('#daan').value
        
    })
    console.log(res);
    if(res.status === 200){
        return alert('修改成功')
    }else{
        return alert('修改失败')
    }
})
//===========上一步==========
qs('#uponebu2').addEventListener('click',function(){
    qs('#one').style.display = 'none'
    qs('#two').style.display = 'block'
qs('#three').style.display = 'none'
})



</script>
</body>

</html>